<template>
  <div>
    <div ref='myEchart' class='main'></div>
    {{this.mapData}}
    {{this.conditions}}
  </div>
</template>
<script>
import mapList from './mapList.js'
export default {
  props: ['mapData', 'conditions'],
  data () {
    return {
      province: mapList()
    }
  },
  methods: {
    map () {
      this.loadMap('china', mapList()[0].data)
    },
    changeMap (params) {
      console.log(params)
      // console.log(params.name)
      // this.$store.commit('addParamsName', params)
      this.$emit('cityDataFn', params.name)
      this.mapDisplay(params.name)
    },
    mapDisplay (name) {
      this.province.forEach(element => {
        if (element.name === name) {
          // console.log(element.id)
          this.$emit('provinceFn', element.id)
          this.loadMap(element.py, element.data)
        }
      })
    },
    loadMap (mapName, data) {
      // console.log(mapName)
      // console.log(data)
      if (data) {
        var myChart = this.$echarts.init(this.$refs.myEchart)
        this.$echarts.registerMap(mapName, data)
        var option = {
          visualMap: {
            min: 0,
            max: 20000,
            text: ['', '已导入人数'],
            realtime: false,
            calculable: true,
            inRange: {
              color: ['#d68e33', '#FF0101']
            },
            show: false
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          series: [{
            name: '全国地图',
            type: 'map',
            roam: false,
            mapType: mapName,
            selectedMode: 'single',
            showLegendSymbol: false,
            visibility: 'off',
            itemStyle: {
              normal: {
                color: '#ccc',
                areaColor: '#DFF2F6',
                borderColor: '#3572d4',
                borderWidth: 0.5,
                shadowColor: 'rgba(200,200,255, 0.5)',
                shadowBlur: 80,
                label: {
                  show: false,
                  textStyle: {
                    // color: 'red'
                  }
                }
              },
              emphasis: {
                areaColor: false,
                borderColor: '#ccc',
                areaStyle: {
                  // color: '#3572d4'
                },
                label: {
                  show: true
                }
              }
            },
            // data: this.mapData
            data: [
              // {
              //   name: '山西省',
              //   value: 1
              // }
            ]
          }]
        }
        myChart.setOption(option)
      }
      myChart.on('click', this.changeMap)
    }
  },
  mounted () {
    // if (this.$store.state.paramsName === '' && this.$store.state.type === 1) {
    //   this.map()
    // } else if (this.$store.state.paramsName.name !== '') {
    //   this.changeMap(this.$store.state.paramsName)
    // }
    this.map()
  },
  computed: {
    // paramsName () {
    //   return this.$store.state.paramsName
    // }
  },
  watch: {
    // paramsName: function (old, newd) {
    //   this.mapDisplay()
    // }
  }
}
</script>
<style scoped>
.main{
  width: 100%;
  height: 600px;
}
</style>
